<template>
  <div class="home-wrapper">
    <el-carousel indicator-position="outside" :interval="3000" arrow="never">
      <el-carousel-item v-for=" item in 4" :key="item">
        <h3 text="2xl" justify="center">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <div class="hw-contentOne">
      <h3>{{state.title}}</h3>
      <div class="hwc-text">{{state.text}}</div>
      <div class="hwc-txtImg">
        <div class="hwc-left">
          <div class="l-title"> <strong>提高</strong><br> 内容生成效率</div>
          <div class="l-txt">{{state.txt}}</div>
        </div>
        <div class="hwc-right">
          <img src="@/assets/imgs/icon1.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { getHomeCategories } from "@/service";
// import { useRouter } from "vue-router";
// const router = useRouter();

const state = reactive({
  count: 0,
  title: "你的想法值得被更好的倾听",
  text: "想法的表达决定了关于你的品牌的对话。无论你是激昂地、庄重地、温柔地表达，还是只在互联网上简单叙述， 初音都会基于你的品牌调性辅助文案创作，无论何时何地。",
  txt: "千帆写作助手智能写作技术可以快速生成各种类型的 文本内容，如直播脚本、短视频文案、广告文案等， 帮助电商从业者节省时间，提高工作效率。",
});
getHomeCategories().then((res) => {
  console.log(res, "getHomeCategories");
});
onMounted(() => {
  console.log(state.count);
});
// const changeCount = () => {
//   state.count++;
//   router.push({ path: "/about" });
// };
</script>
<style lang="less">
.home-wrapper {
  margin-top: 91px;
  .hw-contentOne {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h3 {
      font-size: 48px;
      color: #565656;
      margin-bottom: 18px;
    }
    .hwc-text {
      width: 912px;
      height: 114px;
      font-size: 22px;
      font-family: Inter-Regular, Inter;
      font-weight: 400;
      color: #141414;
      line-height: 32px;
    }
    .hwc-txtImg {
      display: flex;
      justify-content: space-around;
      .hwc-left {
        margin-top: 124px;
        width: 458px;
        text-align: left;
        .l-title {
          font-size: 64px;
          color: #050038;
        }
        .l-txt {
          font-size: 24px;
          color: #050038;
          opacity: 0.6;
        }
      }
      .hwc-right {
        margin-top: 49px;
        margin-left: 183px;
      }
    }
  }
  .el-carousel__item h3 {
    display: flex;
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
</style>
